---
import { slugifyStr } from '@/utils/slugify';
import type { CollectionEntry } from 'astro:content';
import Datetime from './Datetime.astro';
import getPath from '@/utils/getPath';
import Excerpt from './Excerpt.astro';
import Tag from './Tag.astro';

export interface Props extends CollectionEntry<'blog'> {
  variant?: 'h2' | 'h3';
  excerpt?: boolean;
}

const { variant = 'h2', data, slug, excerpt = true, render } = Astro.props;

const { title, tags, pubDatetime, modDatetime } = data;

const headerProps = {
  style: { viewTransitionName: slugifyStr(title) },
  class: 'text-lg font-medium decoration-dashed hover:underline',
};

const { Content } = await render();
---

<li class="my-6">
  <a
    href={getPath(`/posts/${slug}`)}
    class="text-accent inline-block text-lg font-medium decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
  >
    {variant === 'h2' ? <h2 {...headerProps}>{title}</h2> : <h3 {...headerProps}>{title}</h3>}
  </a>
  {
    excerpt && (
      <Excerpt>
        <Content />
      </Excerpt>
    )
  }
  <div class="flex">
    <Datetime {pubDatetime} {modDatetime} />
    <ul class="ml-2 opacity-80">
      {tags.map(tag => <Tag size="sm" tag={slugifyStr(tag)} tagName={tag} />)}
    </ul>
  </div>
</li>
